<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{width:200px;}
        .proImg{overflow: hidden;}
        .proImg>div{float: left;margin-right: 20px;}
        .sbox{width:300px;height:300px;position: relative;}
        .sbox span{width:150px;height:150px;background:rgba(200,200,200,0.6);position: absolute;left:0;top:0;display: none;}
        .sbox em{position: absolute;z-index: 1;left:0;top:0;right:0;bottom:0;}
        .simg{width:300px;height:300px;}
        .bbox{width:300px;height:300px;overflow: hidden;display:none;position: relative;}
        .bimg{width:600px;height:600px;position: absolute;left:0;top:0;}

    </style>
</head>
<body>
    <h3>这是详情页 <a href="./list.html">查看其它</a></h3>
    <div class="box">
        <p class="proName">名称：<span></span></p>
        <div class="proImg">
            <div class="sbox">
                <img class="simg" src="" alt="">
                <span></span>
                <em></em>
            </div>
            <div class="bbox">
                <img class="bimg" src="" alt="">
            </div>
        </div>
        <p class="proPrice">价格：<span></span></p>
    </div>
</body>
<script src="./js/ajax.js"></script>
<script>
    const id = location.search.split("=")[1];

    ajax({
        url:"http://localhost:3000/api",
        data:{
            type:"getGoods"
        }
    }).then(res=>{
        res = JSON.parse(res);
        let i=0;
        res.some((val,idx)=>{
            i = idx;
            return val.proId === id
        })

        const proName = document.querySelector(".proName span");
        const sImg = document.querySelector(".simg");
        const bImg = document.querySelector(".bimg");
        const proPrice = document.querySelector(".proPrice span");

        // console.log(res[i])

        proName.innerHTML = res[i].proName;
        sImg.src = res[i].img;
        bImg.src = res[i].img;
        proPrice.innerHTML = res[i].price;
    })


    // 放大镜
    const sbox = document.querySelector(".sbox")
    const bbox = document.querySelector(".bbox")
    const simg = document.querySelector(".simg")
    const span = document.querySelector(".sbox span")
    const bimg = document.querySelector(".bimg")

    // 鼠标进入小图
    sbox.onmouseover = function(){
        // 显示大图和遮罩层
        bbox.style.display = "block";
        span.style.display = "block";
    }
    // 鼠标离开小图
    sbox.onmouseout = function(){
        // 隐藏大图和遮罩层
        bbox.style.display = "none";
        span.style.display = "none";
    }
    // 鼠标在小图移动
    sbox.onmousemove = function(eve){
        // 计算移动距离
        let l = eve.offsetX - span.offsetWidth/2;
        let t = eve.offsetY - span.offsetHeight/2;
        // 设置边界限定
        if(l<0){
            l=0
        }
        if(l>sbox.offsetWidth-span.offsetWidth){
            l=sbox.offsetWidth-span.offsetWidth
        }
        if(t<0){
            t=0
        }
        if(t>sbox.offsetHeight-span.offsetHeight){
            t=sbox.offsetHeight-span.offsetHeight
        }
        // 设置给遮罩层
        span.style.left = l + "px";
        span.style.top = t + "px";
        // 计算移动比例
        const x = l / (sbox.offsetWidth-span.offsetWidth);
        const y = t / (sbox.offsetHeight-span.offsetHeight);
        // 根据移动比例，计算右侧大图移动距离，设置给大图
        bimg.style.left = (bbox.offsetWidth-bimg.offsetWidth) * x + "px";
        bimg.style.top = (bbox.offsetHeight-bimg.offsetHeight) * y + "px";
    }

</script>
</html>